<template>
	<view :style="{'--color': color}"  :class="{'p-bot100':info.buy == 1}">
		<status-bar :title="title" ></status-bar>
		<view class="rows bgwhite padding30 ">
			<view class="color_33 size32">{{info.class_name}}</view>
			<view class="color_33 h6 m-top30">{{info.class_info}}</view>
		</view>
		<view class="row dun"></view>
		
		<view class="row bgwhite padding30">
			<view class="row j-sa">
				<block v-for="(item,index) in navlist" :key="index">
				<view class="color p-bot30  p-re" 
				     :class="index == current?'size36 titlebox bold':'size32'"
					 @click="current = index">{{item}}</view>
				</block>
			</view>
			
			<view class="rows m-top20"  v-if="current == 0">
				<block v-if="class_detail">
				<mp-html :content="class_detail" lazy-load scroll-table selectable use-anchor show-with-animation @load='getSwiperHeight' @ready='getSwiperHeight'/>
				</block>	
				<empty type='1' cat='2'  msg='暂无课程介绍' v-else></empty>
			</view>
			
			<block v-if="current == 1">
				<block v-if="info.lessons && info.lessons.length">	
					<view class="row m-top30" 
					     v-for="(item,index) in info.lessons" :key="index" 
						 @click="toUrl(`courseDetail?lid=${item.lesson_id}`)">
						<view class="row a-center ">
							<view class="iconfont icon-24gf-playCircle size50 color"></view>
							<view class="flex-1  padding30-20 listV m-left20">
								<view class="color_33 size30">{{item.lesson_title}}</view>
								<view class="listTime h6 m-top30" v-if="item.lesson_length">
									<view class="listcent d-inline-block">{{item.lesson_length}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				
				<empty type='1' cat='2'  msg='暂无课程列表' class="rowwh" v-else></empty>
				
			</block>	
		
		
			
		
		
	
		
		</view>
		
		
		<view class="row  fixBot flexac" v-if="info.buy == 1">
			<view class="shop white size28 flexac" @click="shopCurr">课程购买 ￥{{info.price}}</view>
		</view>
		
		<showModel @cancelFunc='showModal = false' goHome='0' v-if='showModal' type='2'></showModel>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'学习',
				id:0,
				color: getApp().globalData.color,
				info:'',
				showModal:false,
				navlist:['课程介绍','课程列表'],
				current:0,
				class_detail:'',
			}
		},
		onLoad(option) {
			if(option.id) this.id = option.id
			this.lesson_list(option.id)
		},
		methods: {
			lesson_list(class_id){
				this.$http.get({
					url:'/zzj_singleSaleApi/lesson_list',
					data:{
						bid:uni.getStorageSync('bid'),
						class_id
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					this.info = res.data;
					this.class_detail = this.$common.richTxt(this.info.class_detail).html;
				})
			},
			
			shopCurr(){
				let vid = uni.getStorageSync('vid');
				if(!vid) return this.showModal = true;
				let lessons = [];
				this.info.lessons.forEach((item,index)=>{
					lessons.push(item.lesson_id) 
				})
				this.$http.post({
					url:'/zzj_singleSaleApi/lesson_order',
					data:{
						class_id:this.id,
						lessons:lessons.toString(),
						v_id:uni.getStorageSync('vid'),
						bid:uni.getStorageSync('bid'),
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					this.getLessonPay(lessons.toString())
				})
			},
			
			getLessonPay(lessons){
				this.$http.post({
					url:'/accountPay/getLessonPay',
					data:{
						source:1,
						lessons,
						v_id:uni.getStorageSync('vid'),
						bid:uni.getStorageSync('bid'),
					}
				}).then(res=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dun{
		width:100%;
		height: 20rpx;
		background-color: #f7f7f7;
	}
	.titlebox{
		border-bottom: 2px solid var(--color);
	}
	.listV{
		// box-shadow: 0 1rpx 5rpx 0 rgb(0 0 0 0.5);
		border-radius: 10rpx 10rpx 0 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
	}
	.listTime{
		 line-height: 18px;
		 border-radius: 18px;
		 height: 18px;
	}
	.listcent{
		background-color: #FEF7EB;
		color:#F8AD24;
		 padding: 2px 8px;
		  border-radius: 18px;
	}
	.fixBot{
		width:100%;
		background-color: #ffffff;
		height: 120rpx;
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, .1);
		position: fixed;
		bottom: 0;
		left:0;
	}
	.shop{
		width:600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: var(--color);
		
	}
</style>
